<template>
    <div class="personal">
        <div class="user">
            <img src="../assets/ikun.jpg" alt="" v-if="login.idcode == 1 ? true : false" width="150">
            <img src="../assets/ckun.webp" alt="" v-else width="150">

        </div>
        <p>{{ personal.username }}</p>
        <div class="btn">
            <el-button @click="unPass(true)">修改密码</el-button>
        </div>
        <div class="newpass" v-show="showpass">
            请输入新密码：<el-input v-model="newpassword.new"></el-input>
            请再次确认密码：<el-input v-model="newpassword.yesnew"></el-input>
            <div class="message">{{ newpassword.new == newpassword.yesnew ? '' : '两次输入的密码不一致' }}</div>
            <el-button type="primary" :disabled="newpassword.new == newpassword.yesnew ? false : true"
                @click="reviseNew()">提交</el-button><el-button @click="unPass(false)">取消</el-button>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs } from 'vue';
import { useRoute, useRouter } from "vue-router";
import { LoginStore } from "../store/login";
import { personalStore } from "../store/personal";
import { personalApi, reviseApi } from "../request/api";

const Router = useRouter();
const Route = useRoute();

const login = reactive(LoginStore());
const token = localStorage.getItem("token");
const personal = reactive(personalStore());
console.log(token);

let showpass = ref(false);
const unPass = (val) => {
    showpass.value = val;
}

let newpassword = reactive({
    new: "",
    yesnew: ""
});

personalApi(token).then(res => {
    personal.Newusername(res.userData.username);
});

const reviseNew = () => {
    if (newpassword.new == "") {
        ElMessage({
            message: "请输入修改的密码",
            type: 'error'
        });
        return
    }
    reviseApi({
        token: token,
        pass: newpassword.new,
    }).then(res => {
        console.log(res);
        if (res) {
            ElMessage({
                message: "修改成功!",
                type: 'success'
            });
            setTimeout(() => {
                Router.go(0)
            }, 500)
        }
    })
}

</script>
 
<style lang = "less" scoped>
.personal {
    .user {
        text-align: center;

        img {
            border-radius: 50%;
        }
    }

    p {
        text-align: center;
        line-height: 60px;
        font-size: 24px;
    }

    .btn {
        text-align: center;
    }

    .newpass {
        width: 40%;
        margin: 20px auto 0;
        line-height: 40px;

        .message {
            color: red;
        }
    }
}
</style>